<template>
    <div class="footerMusic">
        <div class="footerLeft">
            <img :src="playList[playListIndex].al.picUrl" alt="">
            <div>
                <p>{{ playList[playListIndex].al.name }}</p>
                <span>横滑可以切换上下首哦</span>
            </div>
        </div>
        <div class="footerRight">
            <svg class="icon" aria-hidden="true" v-if="isbtnShow" @click="play">
                <use xlink:href="#icon-bofang"></use>
            </svg>
            <svg class="icon" aria-hidden="true" v-else @click="play">
                <use xlink:href="#icon-zanting1"></use>
            </svg>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-zu"></use>
            </svg>
        </div>

        <audio ref="audio"
            :src="`https://music.163.com/song/media/outer/url?id=${playList[playListIndex].id}.mp3 `"></audio>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
    name: 'HtmlFooterMusic',
    computed: {
        ...mapState(['playList', 'playListIndex', 'isbtnShow'])
    },
    mounted() {
        console.log(this.$refs);
    },
    methods: {
        play() {
            // 判断音乐是否播放
            if (this.$refs.audio.paused) {
                this.$refs.audio.play()
                this.updataIsbtnShow(false)
            } else {
                this.$refs.audio.pause()
                this.updataIsbtnShow(true)
            }
        },
        ...mapMutations(['updataIsbtnShow'])
    },
    watch: {
        playListIndex: function () {   //监听如果下标发生了改变，就自动播放音乐
            this.$refs.audio.autoplay = true
            if (this.$refs.audio.paused) {  //如果是暂停状态，改变图标
                this.updataIsbtnShow(false)
            }
        }
    }
};
</script>

<style lang="less" scoped>
.footerMusic {
    width: 100%;
    height: 1.4rem;
    background: #fff;
    position: fixed;
    border-top: 1px solid #999;
    bottom: 0;
    display: flex;
    padding: .2rem;
    justify-content: space-between;

    .footerLeft {
        width: 70%;
        height: 100%;
        display: flex;
        align-items: center;

        img {
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            margin-right: .2rem;
        }

        span {
            color: #aca9a9;
        }
    }

    .footerRight {
        width: 22%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .icon {
            width: .6rem;
            height: .6rem;
        }
    }
}
</style>